<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3200608057李官函</title>
    <link rel="stylesheet" href="css/sortable.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src='js/jquery.min.js'></script>
    <script src='js/sortable.min.js'></script>
</head>


<body>
    <div class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>3200608057李官函 <span>计算机学院软件2002班</span></h1>
        </header>
        <main class="sortable">
            <div class="container">
                <div class="wrapper">
                    <ul class="sortable__nav nav">
                        <li>
                            <a data-sjslink="all" class="nav__link">
		              All
		            </a>
                        </li>
                        <li>
                            <a data-sjslink="flatty" class="nav__link">

                              兴趣爱好            </a>
                        </li>
                        <li>
                            <a data-sjslink="funny" class="nav__link">
家乡介绍
                            </a>
                        </li>
                    </ul>
                    <div id="sortable" class="sjs-default">
                        <div data-sjsel="flatty">
                            <div class="card">
                                <img class="card__picture" src="./images/1.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">看动画</h2>
                                    <p class="card__text">
                                        20岁，是爱看动画的大二学生😄
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="flatty">
                            <div class="card">
                                <img class="card__picture" src="./images/2.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">打游戏</h2>
                                    <p class="card__text">
                                       哪怕学习再辛苦，每周总是能抽出时间玩上一会，总是让父母生气😆
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="funny">
                            <div class="card">
                                <img class="card__picture" src="images/3.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">连云港市</h2>
                                    <p class="card__text">
                                      连云港是江苏省历史文化名城、海上丝绸之路申遗城市，有2200多年建城史。连云港是中国优秀旅游城市、国家园林城市，有花果山、连岛、孔望山、海上云台山、大伊山、西双湖等旅游景点，是一座山、海、港、城相依相拥的城市，有东海第一胜境之称。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="flatty">
                            <div class="card">
                                <img class="card__picture" src="./images/4.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">唱歌</h2>
                                    <p class="card__text">
                                        从小到大嗓子都不是很好，高中时做过扁桃切割手术，但即便如此也喜欢音乐，喜欢唱歌。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="flatty">
                            <div class="card">
                                <img class="card__picture" src="./images/5.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">打乒乓球</h2>
                                    <p class="card__text">
                                        小学的时候学过几个暑假乒乓球，上初中时热情又渐渐下去了，最近看过一部关于乒乓的动画片，又有了动力
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="funny">
                            <div class="card">
                                <img class="card__picture" src="./images/6.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">特色美食</h2>
                                    <p class="card__text">

                                      很多人认为豆丹是虫子，一般不敢吃或不愿吃，尝后才赞不绝口。 如今，豆丹已风行到淮海地区的饭馆，不再是灌云独家所有。但其做法与风味，还是以灌云为翘楚。特别是冬季入节豆丹，从豆地刨出后，如何除去土气，使其更加鲜香美口，更是灌云厨师一技。由于它只在夏天才生长，所以物以稀为贵，据说冬季的时候豆丹在当地已经动辄上千元一盆。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="flatty">
                            <div class="card">
                                <img class="card__picture" src="./images/7.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">看书</h2>
                                    <p class="card__text">
                                        初高中因为父母不给看电视玩电脑，看书也主要是我消遣时间的方式，我最喜欢的书是巴金先生的激流三部曲《家》《春》《秋》。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="flatty">
                            <div class="card">
                                <img class="card__picture" src="./images/8.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">看电影</h2>
                                    <p class="card__text">
                                        有些人总是问，你为什么要看书看电影或者甚至是活着，我说是为了寻找感动。书籍如此，影视剧作动画也如是。让我的内心怀揣温暖。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-sjsel="funny">
                            <div class="card">
                                <img class="card__picture" src="images/9.jpg" alt="">
                                <div class="card-infos">
                                    <h2 class="card__title">旅游景点</h2>
                                    <p class="card__text">
                                      花果山以古典名著《西游记》而著称名闻海内外。唐、宋、元、明、清先后在这里筑庙建塔，千百年来的古建筑、古遗址、古石刻、及历代文人墨客的游踪手迹遍布山中。早在明万历30年，朱翊钧皇帝已颁旨花果山中的三元宫为天下名山寺院。康熙皇帝亲题“遥镇洪流”四字镌刻在花果山主峰玉女峰上，以表对花果山神灵的敬仰。李白：“明月不归沉碧海，白云愁色满苍梧。”与苏轼：“郁郁苍梧海上山，蓬莱方丈有无间。”写的都是云台山，自古就有“东海第一胜境”和“海内四大灵山之一”美誉。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <div class="related">
            <h3></h3>
        </div>
    </div>

    <script type="text/javascript">
        document.querySelector('#sortable').sortablejs()
    </script>
</body>

</html>